<div class="example-container mat-elevation-z8">
  <div
    class="example-loading-shade"
    *ngIf="isLoadingResults || isRateLimitReached"
  >
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div class="example-table-container">
    <table
      mat-table
      [dataSource]="data"
      class="example-table"
      matSort
      matSortActive="userId"
      matSortDisableClear
      matSortDirection="asc"
    >
      <ng-container matColumnDef="userId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          userId
        </th>
        <td mat-cell *matCellDef="let row">{{ row.userId }}</td>
      </ng-container>

      <ng-container matColumnDef="loginName">
        <th mat-header-cell *matHeaderCellDef>
          loginName
        </th>
        <td mat-cell *matCellDef="let row">{{ row.loginName }}</td>
      </ng-container>

      <ng-container matColumnDef="loginCount">
        <th mat-header-cell *matHeaderCellDef>loginCount</th>
        <td mat-cell *matCellDef="let row">{{ row.loginCount }}</td>
      </ng-container>

      <ng-container matColumnDef="lastLoginTime">
        <th mat-header-cell *matHeaderCellDef>lastLoginTime</th>
        <td mat-cell *matCellDef="let row">{{ row.lastLoginTime }}</td>
      </ng-container>

      <ng-container matColumnDef="lastLoginIp">
        <th mat-header-cell *matHeaderCellDef>lastLoginIp</th>
        <td mat-cell *matCellDef="let row">{{ row.lastLoginIp }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>

  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
